<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>供货详情</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" type="text/css" href="../../common/bootstrap/css/bootstrap.css" media="all">
	<link rel="stylesheet" type="text/css" href="../../common/layui/css/layui.css" media="all">
	<link rel="stylesheet" type="text/css" href="../../common/global.css" media="all">
	<link rel="stylesheet" type="text/css" href="../../css/customer_list.css" media="all">
</head>
<style>
	.layui-table-cell {
		white-space: normal !important; /* 允许多行显示 */
		word-break: break-all;          /* 长单词或 URL 地址换行 */
	}

	.layui-table-body .layui-none {
		line-height: 26px;
		padding: 15px 15px 15px 208px;
		color: #999;
	}

	tbody tr .layui-table-cell {
		height: auto !important;
	}
	.layui-form-item .layui-input-inline {
		font-size: 14px;
		width: 250px;
		margin-right: 10px;
	}

	.main_content_wrap{
		margin-top: 0px;
	}
	.detail_wrap{
		padding: 0 10px;
	}

	.must{
		color: red;
	}

	.order_massage{
		padding:0 15px;
	}
	.order_massage li{
		overflow: hidden;
		padding: 3px 0;
		font-size: 14px;
		color: #000;
	}

	.order_massage li:last-child{
		border-bottom: none;
	}
	.order_massage_title{
		float: left;
		width: 25%;
	}
	.order_address_title{
		float: left;
		width: 100%;
	}
	.layui-input-block {
		margin-left: 85px;
		min-height: 36px;
	}
	.peijian_totall{
		color: #a4a3a3;font-size: 13px;font-weight: bold
	}
</style>
<body>
<!-- 添加车辆和司机 -->
<div class="layui-fluid content_box">
	<div class="main_content_wrap">
		<form class="layui-form add_form" lay-filter="addForm" id="addForm" action="">
			<p class="add_title">基础信息</p>
			<div class="layui-card-body" id="orderView"></div>
			<p class="add_title">零件清单</p>
			<div class="detail_wrap">
				<table class="layui-table max_w" id="infoTable" lay-filter="infoTable"></table>
			</div>
			<!-- 按钮 -->
			<div class="layui-row layui-col-space5 detail_wrap">
				<!-- 卡片数据集合 -->
				<div class="layui-col-sm6 layui-col-md8">
					<p class="add_title">付款记录</p>
					<table class="layui-table max_w" id="moneyLog" lay-filter="moneyLog"></table>
				</div>
				<!--<div class="layui-col-sm6 layui-col-md4">
					<p class="add_title">发货记录</p>
					<table class="layui-table max_w" id="sendGoodsLog" lay-filter="sendGoodsLog"></table>
				</div>-->
				<div class="layui-col-sm6 layui-col-md4">
					<p class="add_title">开票记录</p>
					<table class="layui-table max_w" id="invoiceLog" lay-filter="invoiceLog"></table>
				</div>
			</div>

		</form>
	</div>
</div>
<script type="text/html" id="infoTableBar">
	{{# if(d.state != 4){ }}
	<a class="layui-btn btn-red" lay-event="returns">退件</a>
	{{# } }}
</script>
<script type="text/html" id="picUrl">
	{{# if(d.pic_url){ }}
	<div class="layui-input-inline upload_icon" style="height:30px;">
		<img src="{{d.pic_url}}" class="imgs" style="width:100%; height: 100%;">
	</div>
	{{# } }}
</script>
<!-- 形成报价表单弹窗 -->
<script type="text/html" id="returnsForm">
	<form lay-filter="returnsForm" class="layui-form model-form">
		<input name="id" type="hidden"/>
		<div class="layui-form-item">
			<label class="layui-form-label"><span class="must">*</span>退款类型</label>
			<div class="layui-input-block">
				<input type="radio" name="returns_type" lay-filter="choseType" value="1" title="只退采购" checked>
				<input type="radio" name="returns_type" lay-filter="choseType" value="2" title="全退">
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">备注</label>
				<div class="layui-input-block">
					<input name="returns_common" placeholder="备注" type="text" class="layui-input" autocomplete="off"/>
				</div>
			</div>
		</div>
		<div class="layui-form-item text-center">
			<button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
			<button class="layui-btn" lay-filter="returnsFormSubmit" lay-submit>确认</button>
		</div>
	</form>
</script>
<script type="text/html" id="payForm">
	<form lay-filter="payForm" class="layui-form model-form">
		<input name="id" type="hidden"/>
		<input name="type" value="2" type="hidden"/>
		<input name="company_type" value="" type="hidden"/>
		<div class="layui-form-item">
			<label class="layui-form-label">应付金额</label>
			<div class="layui-input-inline">
				<input name="payable_amount" placeholder="请输入应付金额" type="number" class="layui-input" autocomplete="off" lay-verify="required" required/>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">实付金额</label>
			<div class="layui-input-inline">
				<input name="pay_money" placeholder="请输入本次打款实付金额" type="number" class="layui-input" autocomplete="off" lay-verify="required" required/>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">付款时间</label>
			<div class="layui-input-inline">
				<input type="text" name="pay_datetime" id="pay_datetime" placeholder="yyyy-MM-dd HH:mm:ss" lay-verify="required" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">付款方式</label>
			<div class="layui-input-block">
				<select name="pay_type" id="pay_type" lay-search lay-verify="required">
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">付款凭证</label>
			<div class="layui-input-inline upload_icon" id="pic" style="width:50px;display: none">
				<img src="" id="img" class="imgs" style="width:100%; height: 100%;">
			</div>
			<p class="layui-btn" id='uploadfile'>
				<i class="layui-icon">&#xe67c;</i>
				<span>上传</span>
			</p>
			<input name="pic_url" id="pic_url" hidden/>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">备注</label>
			<div class="layui-input-inline">
				<input name="log_common" placeholder="备注" type="text" class="layui-input" autocomplete="off" maxlength="155" />
			</div>
		</div>
		<div class="layui-form-item text-center">
			<button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
			<button class="layui-btn" lay-filter="payFormSubmit" lay-submit>确定</button>
		</div>
	</form>
</script>
<script id="orderDetail" type="text/html">
	<ul class='order_massage'>
		<li>
			<span class="order_massage_title">询价单号：{{d.bus_inquiry_no}}</span>
			<span class="order_massage_title">询价日期：{{d.add_datetime}}</span>
			<span class="order_massage_title">下单日期：{{d.sure_datetime?d.sure_datetime:''}}</span>
			<span class="order_massage_title">供货日期：{{d.sales_datetime?d.sales_datetime:''}}</span>
		</li>
		<li>
			<span class="order_massage_title">车牌号码：{{d.vehicle_license_num?d.vehicle_license_num:''}}</span>
			<span class="order_massage_title">车架号：{{d.vehicle_frame_no?d.vehicle_frame_no:''}}</span>
			<span class="order_massage_title">品牌名称：{{d.brand_name?d.brand_name:''}}</span>
			<span class="order_massage_title">车型名称：{{d.car_model?d.car_model:''}}</span>
		</li>
		<li>
			<span class="order_massage_title">修理厂名称：{{d.repair_company_name?d.repair_company_name:''}}</span>
			<span class="order_massage_title">修理厂电话：{{d.repair_company_phone?d.repair_company_phone:''}}</span>
			<span class="order_massage_title">物流：{{d.logistics_name?d.logistics_name:''}}</span>
			<span class="order_massage_title">询价人：{{d.add_user_name?d.add_user_name:''}}</span>
		</li>
		<!--<li>
			<span class="order_massage_title">运费+木架：{{d.freight?d.freight:''}}</span>
			<span class="order_massage_title">配件总价：{{d.totall_price?d.totall_price:''}}</span>
			<span class="order_massage_title">税金：{{d.tax_amount?d.tax_amount:''}}</span>
			<span class="order_massage_title">合计总价：{{d.totall_price_tax?d.totall_price_tax:''}}</span>
		</li>-->
	</ul>
</script>
<script type="text/html" id="price">
	{{# if(d.id>0){ }}
	{{d[d.make_sure_quilty]}}
	{{# }else if(d.id == -3){ }}
	{{d.price}}%
	{{# } }}
</script>
<script type="text/html" id="totallprice">
	{{# if(d.id>0){ }}
	{{d.totall_price}}
	{{# }else if(d.id == -1){ }}
	<span class="peijian_totall">{{d.totall_price}}</span>
	{{# }else{ }}
	{{d.totall_price}}
	{{# } }}
</script>
<script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery.cookie.js"></script>
<script type="text/javascript" src="../../common/layui/layui2.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../js/main.js"></script>
<script type="text/javascript" src="../../jsplug/xm-select.js"></script>
<script>
	var id = GetQueryString('id');
	layui.use(['jquery','form','laydate', 'admin','table','laytpl','upload'], function(){
		var $ = layui.jquery;
		var form = layui.form;
		var table = layui.table;
		var admin = layui.admin;
		var laytpl = layui.laytpl;
		var laydate = layui.laydate;
		var upload = layui.upload;

		form.render();

		var detail_data = [];
		var detailList = [];
		var scrollPosition = {
			table: 0, // 表格容器的滚动位置
			parent: 0 // 父容器的滚动位置（如果适用）
		};

        var DISABLED = 'layui-btn-disabled';

		getInfo();
		function getInfo() {
			send_req('Sales/getDetailInfo', {id: id}, function (data) {
				detail_data = data;
				// 渲染车辆信息详情
				var orderDetail = document.getElementById('orderDetail');
				var getTpl = orderDetail.innerHTML;
				var view = document.getElementById('orderView');
				laytpl(getTpl).render(detail_data, function(html){
					view.innerHTML = html;
				});

				detailList = data.detail_sales;
				table.render({
					elem: '#infoTable',
					data: detailList, // 使用本地数据源
					limit:100,
					page: false, // 如果不需要分页，设置为false
					cols: [[
						{title: '序号',width: 60, templet: function(d){
								if (d.id > 0) {
									return d.LAY_INDEX; // LAY_INDEX 是 Layui 表格为每行自动生成的索引
								}else if(d.id < -1){
									return d.LAY_INDEX - 1;
								} else {
									return '';
								}
							}},
						{field: 'eq_name',title: '配件名称', templet: function(d){
								if (d.id == -1) {
									return "<span class='peijian_totall'>"+d.eq_name+"</span>";
								} else {
									return d.eq_name;
								}
							},width:220},
						{field: 'oe_no', title: 'OE码',width:220},
						{field: 'num', title: '数量'},
						{title: '单价',templet:'#price'},
						{field: 'totall_price', title: '金额',templet:'#totallprice'},
						{ title: '品质',templet:function (d) {
								return d.make_sure_quilty?makeSureQuilty[d.make_sure_quilty]:''
							}},
						{field: 'state', title: '状态',templet:function (d) {
								if(d.state === ''){
									return '';
								}else if (d.state === 4) {
									return "<span style='color: #fd1e11'>退件</span>";
								}else{
									return "<span style='color: #3eff3a'>正常</span>";
								}
							}},
						{field: 'common', title: '备注'},
						// {align: 'left', toolbar: '#infoTableBar', title: '操作', width: 80}
					]], // 动态生成的列定义
					done: function (res, curr, count) {
						var tableContainer = document.querySelector('#infoTable').parentElement;
						tableContainer.scrollTop = scrollPosition.table;
						// 如果有父容器，也恢复父容器的滚动位置
						if (scrollPosition.parent !== undefined) {
							document.documentElement.scrollTop = scrollPosition.parent || document.body.scrollTop;
						}
					}
				});
			});
		}

		table.render({
			elem: '#moneyLog',
			method:'POST',
			url: access_baseurl+'Sales/getAccountLog', // 使用本地数据源
			where:{id: id},
			page: true, // 如果不需要分页，设置为false
			limit:3,
			limits:[3,6],
			cols: [[
				{field: 'account',title: '收款金额',width: 110},
				{field: 'pay_type', title: '收款方式',width: 100},
				{field: 'pay_datetime', title: '收款时间'},
				{field: 'common', title: '备注'},
				{title: '付款凭证',templet:"#picUrl",width: 100}
			]], // 动态生成的列定义
			done: function (res, curr, count) {
			}
		});

		table.render({
			elem: '#sendGoodsLog',
			method:'POST',
			url: access_baseurl+'Sales/getSendGoodsLog', // 使用本地数据源
			where:{id: id},
			page: true, // 如果不需要分页，设置为false
			limit:3,
			limits:[3,6],
			cols: [[
				{field: 'send_datetime',title: '发货时间'},
				{field: 'common',title: '备注'},
				{ title: '发货凭证',templet:"#picUrl",width: 100},
			]], // 动态生成的列定义
			done: function (res, curr, count) {
			}
		});

		table.render({
			elem: '#invoiceLog',
			method:'POST',
			url: access_baseurl+'Sales/getInvoiceLog', // 使用本地数据源
			where:{id: id},
			page: false, // 如果不需要分页，设置为false
			cols: [[
				{field: 'invoice_datetime',title: '开票时间'},
				{title: '开票凭证',templet:"#picUrl",width: 100}
			]], // 动态生成的列定义
			done: function (res, curr, count) {
			}
		});

		$(document).off('click','.imgs').on("click", ".imgs", function(event){
			var imgSrc = $(this).attr("src");
			window.parent.open_pic_url(imgSrc);
			return false;
		});

		// table.on('tool(infoTable)', function (obj) {
		// 	var data = obj.data;
		// 	// console.log(data)
		// 	if(obj.event === 'returns') { // 删除
		// 		admin.open({
		// 			type: 1,
		// 			area: '500px',
		// 			offset: ['65px','450px'],
		// 			title: '退件',
		// 			content: $('#returnsForm').html(),
		// 			success: function (layero, index) {
		// 				// console.log(layero)
		// 				$(layero).children('.layui-layer-content').css('overflow', 'visible');
		// 				form.val('returnsForm',data);
		// 				form.render();
		// 			}
		// 		})
		// 	}
		// });


		//监听提交----保存
		form.on('submit(returnsFormSubmit)', function(d){
			// 增加样式
			$('.site-demo-active').addClass(DISABLED);
			// 增加属性
			$('.site-demo-active').attr('disabled', 'disabled');
			console.log(d.field)
			layer.load(); //上传loading
			send_req('Sales/returnsEq',d.field,function (res) {
 				layer.msg('提交成功', {icon: 1, time:1500}, function () {
					location.replace('./detail.html?id=' + id);
					layer.closeAll('loading');
					$('.site-demo-active').removeClass('layui-btn-disabled');
					$('.site-demo-active').removeAttr('disabled');
				});
			},false)
			return false;
		});
    });
</script>
</body>
</html>